<template>
  <div :class="$style.evaluate">
    <Icon :allow="allow" :src="src" :srcset="srcset" :text="text" @on-click="iconClickHandle" />
  </div>
</template>
<script>
import Icon from './Icon'
import beforeSign from './js/beforeSign.js'
import afterSign from './js/afterSign.js'
import { mapGetters } from 'vuex'
import { putCreate } from '@/api/telRecord'
export default {
  name: 'Evaluate',
  components: {
    Icon
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['callInfo', 'agentState', 'interval', 'skillList', 'queueSize', 'agentid', 'phonenum', 'agentInfo', 'recordList']),
    src() {
      return this.allow ? afterSign.evaluation : beforeSign.evaluation
    },
    srcset() {
      return this.allow ? afterSign.evaluation2x : beforeSign.evaluation2x
    },
    text() {
      return '评价'
    },
    allow() {
      const { sign, talk } = this.agentState
      return sign && talk
    }
  },
  created() {},
  methods: {
    // 话务条被单击
    iconClickHandle() {
      if (this.allow) {
        // FIXME:评价
        this.$cps.transfer(3, 162).then(res => {
          this.$message.success('操作成功！')
          this.$callOperatorLogSuccess(9) // 评价
          const callInfo = this.recordList[this.callInfo.callid] || {}
          const data = {
            id: callInfo.recordId,
            isInviteEvaluate: 1
          }
          putCreate(data)
        }).catch(() => {
          this.$callOperatorLogFail(9) // 评价失败
        })
      }
    }
  }
}
</script>
<style lang="scss" module>
@import "@/styles/mixin.scss";
.evaluate {
}
.btn{
  @include flex($justify: flex-end);
}
</style>
